<script setup>
import { onMounted, ref, watch } from 'vue'
import { RouterView } from 'vue-router'
import { useRouter } from 'vue-router'
import { wxShare } from '@/utils/wxShare.js'
import { useIndexStore } from '@/stores/index.js'
import { storeToRefs } from "pinia";

let { isOff } = storeToRefs(useIndexStore())

const router = useRouter()

// 刷新 判断token是否过期
let expire_at = localStorage.getItem('expire_at')
if (expire_at) {
  let now = parseInt(new Date().getTime() / 1000)
  if (now > expire_at) {
    localStorage.removeItem('token')
    localStorage.removeItem('expire_at')
    router.replace('/')
  }
}
// if (router.path !== '/') {
//   router.replace('/')
// }

const tipshow = ref(false)

window.addEventListener(
  'onorientationchange' in window ? 'orientationchange' : 'resize',
  function () {
    if (window.orientation === 180 || window.orientation === 0) {
      // 竖屏
      // console.log('竖屏')
      tipshow.value = true
    }
    if (window.orientation === 90 || window.orientation === -90) {
      // 横屏
      // console.log('横屏')
      tipshow.value = false
    }
  },
  false
)
const isLandscape = () => {
  return window.matchMedia("(orientation: landscape)").matches;
}

if (isLandscape()) {
  // console.log('当前是横屏');
  tipshow.value = false
} else {
  // console.log('当前是竖屏');
  tipshow.value = true
}

let micon = ref(new URL('@/assets/img/music_on.png', import.meta.url).href)
let isWx = /micromessenger/i.test(navigator.userAgent)
console.log(isWx);

// if (!isWx) {
// 不是微信浏览器
isOff.value = false
micon.value = new URL('@/assets/img/music_off.png', import.meta.url).href
// }

// 背景音乐管理器
function BGMAutoPlayMgr(url) {
  this.audioContext = new (window.AudioContext ||
    window.webkitAudioContext ||
    window.mozAudioContext)()
  this.sourceNode = null
  this.buffer = null
  this.isPlayingBGM = false
  this.toggleBGM = function () {
    if (typeof this.sourceNode == 'object') {
      if (this.isPlayingBGM) {
        this.sourceNode.stop()
        this.isPlayingBGM = false
      } else this._playSourceNode()
    }
  }
  this._playSourceNode = function () {
    const audioContext = this.audioContext
    audioContext.resume()
    const _sourceNode = audioContext.createBufferSource()
    _sourceNode.buffer = this.buffer
    _sourceNode.loop = true
    _sourceNode.connect(audioContext.destination)
    _sourceNode.start(0)
    this.sourceNode = _sourceNode
    this.isPlayingBGM = true
  }
  let loadAndAutoPlay = (audioUrl) => {
    const audioContext = this.audioContext
    const xhr = new XMLHttpRequest()
    xhr.open('GET', audioUrl, true)
    xhr.responseType = 'arraybuffer'
    xhr.onreadystatechange = () => {
      if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {
        audioContext.decodeAudioData(xhr.response, (buffer) => {
          this.buffer = buffer
          // WeixinJSBridge 微信浏览器内置对象 关闭微信自动播放
          // WeixinJSBridge.invoke('getNetworkType', {}, () => this._playSourceNode())
        })
      }
    }
    xhr.send()
  }
  // 播放
  loadAndAutoPlay(url)
  loadAndAutoPlay = null
  this.isOff = false //按钮状态
}
// 判断是否是安卓
const CheckIsAndroid = () => {
  var browser = {
    versions: (function () {
      var u = navigator.userAgent,
        app = navigator.appVersion
      return {
        //移动终端浏览器版本信息
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 //u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1 //是否iPad
      }
    })()
  }
  //if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
  //    return false;
  //}
  if (browser.versions.android) return true
  return false
}
const bgm = new BGMAutoPlayMgr(new URL('@/assets/media/bgm.mp3', import.meta.url).href)
// 初始化音乐自动播放
const initBGM = () => {
  // setTimeout(() => {
  //   if (CheckIsAndroid()) {
  //     bgm.toggleBGM()
  //   }
  // }, 500)

  let ctrlbtn = document.getElementById('ctrlbtn')
  ctrlbtn.addEventListener('click', () => {
    // bgm.toggleBGM()
    isOff.value = !isOff.value
  })
}

watch(isOff, (newVal) => {
  bgm.toggleBGM()
  newVal ? (micon.value = new URL('@/assets/img/music_on.png', import.meta.url).href) : (micon.value = new URL('@/assets/img/music_off.png', import.meta.url).href)
})

onMounted(() => {
  initBGM()
  wxShare({
    title: '标题...',
    desc: '描述...',
    link: '',
    imgUrl: ''
  })
})
</script>

<template>
  <div class="musicicon">
    <img :src="micon" id="ctrlbtn" />
  </div>
  <RouterView />
  <div class="mobiletips" v-show="tipshow">
    <img src="/src/assets/img/mobile.png" class="mobile" />
    <!-- <p>为了您的良好体验<br />请将手机/平板横屏操作</p> -->
    <img src="/src/assets/img/mobile_text.png" class="mobiletext" />
  </div>
</template>
<style lang="scss" scoped>
.mobiletips {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./assets/img/bg_mobile.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .mobile {
    width: 19%;
  }
  .mobiletext {
    width: 45%;
    margin-top: 5vw;
  }
}
</style>
<style lang="scss">
@font-face {
  font-family: 'SourceHanSansSC';
  font-weight: normal;
  src: url('./assets/fonts/SourceHanSansSC-Normal.otf');
}
@font-face {
  font-family: 'SourceHanSansSC';
  font-weight: 500;
  src: url('./assets/fonts/SourceHanSansSC-Medium.otf');
}
@font-face {
  font-family: 'SourceHanSansSC';
  font-weight: bold;
  src: url('./assets/fonts/SourceHanSansSC-Bold.otf');
}
body {
  font-family: 'SourceHanSansSC' !important;
  font-weight: normal;
}
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  font-weight: normal;
  background-color: #ffffff;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // user-select: none;
  line-height: 1;
}
// 基础box
.box {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.logo {
  position: absolute;
  top: 2.45vw;
  right: 3.125vw;
  width: 4.64%;
  z-index: 9;
}
.bg {
  background: url('./assets/img/bg.jpg') no-repeat center center;
  background-size: cover;
}
.bg3 {
  background: url('./assets/img/bg3.jpg') no-repeat center center;
  background-size: cover;
}
.clmcenter {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.clmstart {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
.btn1 {
  position: relative;
  border: none;
  outline: 0;
  background-color: rgba($color: #33C5B8, $alpha: 0.6);
  border-radius: 2vw;
  color: #ffffff;
  overflow: hidden;
  cursor: pointer;
}
.btn {
  position: relative;
  border: none;
  outline: 0;
  // background-image: linear-gradient(to bottom, #32f8e6, #30a49a);
  // background-color: rgba($color: #33C5B8, $alpha: 0.6);
  border: 0.104vw solid rgba($color: #33c5b8, $alpha: 0.6);
  border-radius: 2vw;
  background: none;
  color: #ffffff;
  overflow: hidden;
  cursor: pointer;
}
.btn_goback {
  position: absolute;
  top: 3.85vw;
  left: 6.46vw;
  width: 0.78vw;
  transition: all 0.5s linear;
  cursor: pointer;
  z-index: 99;
}
.btn_goback:hover {
  transform: scale(1.1);
}
.controlbox {
  position: absolute;
  top: 3.85vw;
  left: 6.46vw;
  z-index: 9;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .btn_goback {
    position: relative;
    left: 0;
    top: 0;
  }
  .btn_menu {
    margin-left: 1.09vw;
    width: 1.5625vw;
    cursor: pointer;
    transition: all 0.5s linear;
  }
  .btn_menu:hover {
    transform: scale(1.1);
  }
}
// 按钮动画
.btnani {
  animation: btnanito 2.5s linear infinite;
}
@keyframes btnanito {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.anileft {
  -webkit-animation: toleft 2s ease-in-out infinite;
  animation: toleft 2s ease-in-out infinite;
}
@-webkit-keyframes toleft {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-0.5vw);
  }
}
@keyframes toleft {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-0.5vw);
    opacity: 1;
  }
}
.aniright {
  -webkit-animation: toright 2s ease-in-out infinite;
  animation: toright 2s ease-in-out infinite;
}
@-webkit-keyframes toright {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(0.5vw);
    opacity: 1;
  }
}
@keyframes toright {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.7;
  }
  50% {
    transform: translateX(0.5vw);
    opacity: 1;
  }
}
// 音乐
.musicicon {
  position: absolute;
  top: 3.54vw;
  left: 3.28vw;
  width: 2.03vw;
  height: 2.03vw;
  z-index: 9;
  img {
    width: 100%;
  }
}
</style>
